<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 1.输入搜索框 -->
      <el-row>
        <!-- 10.搜索框通过绑定输入框搜索关键字，点击搜索按钮，并获取有对应关键字的数据并显示在页面 -->
        <!-- 输入框添加clearable 显示清空输入框按钮 当点击清空的同时 表示无要搜索数据 默认触发 重新获取所有数据显示在页面-->
        <el-input placeholder="请输入内容" style="width: 30%" v-model="queryInfo.query" clearable @clear="getGoodList">
          <div class="block">
            <span class="demonstration">默认 click 触发子菜单</span>
            <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
          </div>
          <el-button slot="append" icon="el-icon-search" @click="getGoodList"></el-button>
        </el-input>
      </el-row>

      <!-- 8. 表格 -->
      <el-table :data="goodsList" style="width: 100%" stripe border>
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="920">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.add_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 新点：通过作用域插槽的形式接收这行data绑定的数据，才能实时删除 -->
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete">
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 9. 分页 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  // 私有数据节点
  data() {
    return {

      // input: '',
      // 3.预先将三个参数定义到data中
      // 属性：{} 指向一个数据对象
      // 查询参数对象
      queryInfo: {
        // 查询参数  指向：用户输入搜索关键字
        query: '',
        // 当前页码 默认1
        pagenum: 1,
        // 默认显示多少条数据
        pagesize: 5,
      },
      // 商品列表
      goodsList: [],
      // 总数据条数
      total: 0,
    }
  },
  // 生命周期函数节点
  created() {
    // 1.调用 getGoodList()获取所有的商品列表
    this.getGoodList()
  },
  // 事件处理函数节点
  methods: {
    // 2. 定义事件处理函数
    // 2.1根据分页获取对应的商品列表 同时需要向后台服务器提交三隔get参数
    async getGoodList() {
      // 4.处理该函数 直接通过this.$http调用get函数发起get请求数据: this.$http.get('请求路径（在接口文档中自行查看）',【这里需要提交一个参数[get参数都要加一个params属性来指定这个参数]】)
      // 如果此接口调用成功得话 服务器会返回一个promise对象：解决方法：使用async await 来简化这次异步操作
      // 5.同时，可以通过解构赋值: 从返回的对象身上解构出data属性并且重命名  const {属性名：重命名} = 请求数据
      const { data: res } = await this.$http.get('goods', {
        params: this.queryInfo,
      })
      // 6.判断：通过 res.meta.status （接口文档中的响应数据中的，计算机存储方法的状态码判断或这其他条件也可以判断）请求数据是否成功 并提示给用户
      if (res.meta.status !== 200) {
        // 失败 提示信息
        this.$message.error('获取商品列表失败')
      }
      // 成功提示信息
      // this.$message.success('获取商品列表成功')
      console.log(res.data) // 验证 // object/goods当前页数据的数组,pagenum当前页码值,total总数据条数
      // 7.把res.data.goods保存到一个数组里，total也保存起来，用来实现数据分页, 前往data解决
      // 7.1将请求的数据存到对应属性中，方便后期使用
      this.goodsList = res.data.goods
      this.total = res.data.total
      // 8.将获取到的数据渲染到页面上
    },

    // 9. 分页
    // 每页多少条数，条数发生变化，页面显示相应条数
    handleSizeChange(val) {
      // 将最新每页数据条数 保存到后台
      this.queryInfo.pagesize = val
      console.log(`每页${val}条`)
      // 获取数据 进行新的渲染 页面显示相应的条数
      this.getGoodList()
    },
    // 当前页发生变化 触发该事件处理函数  页面显示当前页所对应的数据
    handleCurrentChange(val) {
      // 最新当前页 保存到 后台
      this.queryInfo.pagenum = val
      console.log(`当前页: ${val}`)
      // 获取数据 进行新的渲染 显示当前页对应的数据在页面
      this.getGoodList()
    },

    // 11. 删除数据 点击删除按钮 出现删除确认提示框 确认删除 则获取对应行的数据进行删除同时关闭删除提示框，并弹框提示删除成功
    // 提示框点击取消删除则直接关闭提示框并取消删除操作 同时弹框提示已取消删除
    handleDelete(row) {
      let text = row.goods_name
      // 删除确认提示框 提示框的返回值是个promise
      this.$confirm(`此操作将永久删除【${text}】商品, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        let res = await this.$http.delete(`goods/${row.goods_id}`)
        console.log(res)
        if (res.status == 200) {
          this.$message.success(res.statusText)
          // 删除成功 以后 加以判断 如果当前页删到最后一条时 当前页再删除的时候 说明当前页就已经没有数据了 跳转上一页获取所有数据显示在页面
          if (this.total % this.queryInfo.pagesize == 1) {
            this.queryInfo.pagenum = this.queryInfo.pagenum - 1
          }
          // 重新获取数据
          this.getGoodList()
        } else {
          this.$message.error(res.statusText)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>

</style>
